<template>
  <div style="padding: 10px">
    <d-table
      v-loading="loading"
      row-key="id"
      :data="tableData"
      :columns="columns"
      :paginationConfig="paginationConfig"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"></d-table>
  </div>
</template>

<script lang="ts" setup>
  // import { DTable } from '../../../lib/d-el-plus'
  import { ElMessage, vLoading } from 'element-plus'
  import { ref, watch } from 'vue'

  // mock数据
  const allData = [
    { date: '2016-05-0111', id: 1 },
    { date: '2016-05-02', id: 2 },
    { date: '2016-05-03', id: 3 },
    { date: '2016-05-04', id: 4 },
    { date: '2016-05-05', id: 5 },
    { date: '2016-05-06', id: 6 },
    { date: '2016-05-07', id: 7 },
    { date: '2016-05-08', id: 8 },
    { date: '2016-05-09', id: 9 },
    { date: '2016-05-10', id: 10 },
    { date: '2016-05-11', id: 11 },
    { date: '2016-05-01', id: 12 },
    { date: '2016-05-02', id: 13 },
    { date: '2016-05-03', id: 14 },
    { date: '2016-05-04', id: 15 },
    { date: '2016-05-05', id: 16 },
    { date: '2016-05-06', id: 17 },
    { date: '2016-05-07', id: 18 },
    { date: '2016-05-08', id: 19 }
  ]

  const paginationConfig = ref({
    size: 'small',
    align: 'right',
    currentPage: 1,
    pageSize: 5,
    pageSizes: [5, 10, 20, 50, 100],
    total: allData.length
  })
  const loading = ref(false)
  const handleSizeChange = (val: number) => {
    loading.value = true
    paginationConfig.value.pageSize = val
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  const handleCurrentChange = (val: number) => {
    paginationConfig.value.currentPage = val
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  const columns = [
    { label: '多选', cType: 'checkbox' },
    { label: '排序', cType: 'index' },
    { label: '日期', prop: 'date', cType: 'date' }
  ]
  const tableData = ref(allData.slice(0, paginationConfig.value.pageSize))
  watch(paginationConfig.value, pc => {
    ElMessage.success(`切换到第 ${pc.currentPage} 页,每页 ${pc.pageSize} 条`)
    tableData.value = allData.slice(
      (pc.currentPage - 1) * pc.pageSize,
      pc.currentPage * pc.pageSize
    )
  })
</script>
<style scoped lang="scss"></style>
